import { createUseStyles } from "react-jss";

interface Props {
  fontSize: number;
}

export const useStyle = createUseStyles({
  triggerContainer: {
    display: "inline-block",
  },
  dataTimeRange: {
    position: "relative",
    fontSize: (props: Props) => props.fontSize,
    "& input": {
      border: "none",
      outline: "none",
    },
    "& .ct0-timeRange-trigger": {
      height: "24px",
      background: "#fff",
      boxShadow: "0 0 4px 0 #D0D7DF",
      borderRadius: "4px",
      padding: "0 9px",
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "space-between",
      "&.disabled": {
        background: "#f5f5f5",
        opacity: 0.5,
      },
      "& .ct0-timeRange-text": {
        display: "inline-block",
        padding: "0 16px",
      },
      "& .ct0-timeRange-trigger-name": {
        color: "#999",
      },
      "& .ct0-timeRange-trigger-separator": {
        width: "11px",
      },
      "& .ct0-timeRange-trigger-icon": {
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "right",
        position: "absolute",
        left: 0,
      },
      "& .ct0-timeRange-trigger-calenderIcon": {
        display: "inline-flex",
      },
      "& .ct0-timeRange-trigger-rangeIcon": {
        display: "inline-flex",
        cursor: "pointer",
      },
      "& .ct0-timeRange-trigger-clearIcon": {
        display: "none",
        cursor: "pointer",
      },
      "& .ct0-timeRange-trigger-operation": {
        width: "25px",
        height: "100%",
        position: "relative",
        "&:hover": {
          "& .ct0-timeRange-trigger-rangeIcon": {
            display: "none",
          },
          "& .ct0-timeRange-trigger-clearIcon": {
            display: "inline-flex",
          },
        },
      },
    },
  },
  container: {
    width: "552px",
    height: "351px",
    background: "#fff",
    boxShadow: "0px 2px 8px 0px rgba(0, 0, 0, 0.15)",
    borderRadius: "4px",
    color: "#666",
    marginTop: "8px",
    "& .ct0-timeRange-values": {
      padding: "0 16px",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      height: "39px",
      gap: 8,
      "& input": {
        width: "100%",
        flex: 1,
        height: "24px",
        border: "1px solid #D9D9D9",
        borderRadius: "4px",
        padding: "0 7px",
        outline: "none",
        boxSizing: "border-box",
        fontSize: (props: Props) => props.fontSize,
        "&:active, &:hover,&:focus": {
          borderColor: "#D9D9D9",
        },
        "&::-webkit-input-placeholder": {
          color: "#D9D9D9",
        },
      },
      "& .ct0-timeRange-values-timePicker": {
        flex: 1,
        position: "relative",
        "& .ct0-timeRange-dropdown": {
          zIndex: 3,
          position: "absolute",
        },
        "& .ct0-timeRange-dropdown-hidden": {
          display: "none",
        },
        "& .ct0-timeRange-panel": {
          width: "196px",
          height: "225px",
          background: "#fff",
          boxShadow: "0px 2px 8px 0px rgba(0, 0, 0, 0.15)",
          borderRadius: "4px",
          position: "relative",
          fontSize: (props: Props) => props.fontSize,
        },
        "& .ct0-timeRange-time-panel": {
          height: "calc(100% - 28px)",
        },
        "& .ct0-timeRange-content": {
          display: "flex",
          height: "100%",
          borderSpacing: "0",
        },
        "& .ct0-timeRange-time-panel-column": {
          overflowX: "scroll",
          padding: 0,
          margin: 0,
          textAlign: "center",
          flex: 1,
        },
        "& .ct0-timeRange-time-panel-cell": {
          cursor: "pointer",
          height: "24px",
          lineHeight: "24px",
          margin: "3px 0",
          "&:hover": {
            background: "#E9E9E9",
          },
        },
        "& .ct0-timeRange-time-panel-cell-selected": {
          background: "rgba(3,122,255, 0.1)",
        },
        "& .ct0-timeRange-footer": {
          position: "absolute",
          bottom: 0,
          width: "100%",
          height: "27px",
          borderTop: "1px solid rgba(0, 0, 0, 0.09)",
          textAlign: "right",
          padding: "0 17px",
          "& .ct0-timeRange-ranges": {
            listStyle: "none",
            margin: 0,
          },
          "& button": {
            background: "none",
            border: "none",
            outline: "none",
            color: "#037AFF",
            lineHeight: "25px",
            padding: 0,
            cursor: "pointer",
            fontSize: (props: Props) => props.fontSize,
          },
        },
      },
    },
    "& .ct0-timeRange-container-body": {
      display: "flex",
      justifyContent: "space-between",
      padding: "16px 16px 0",
      gap: "16px",
      "& .ct0-timeRange-panel": {
        width: "50%",
      },
      "& .ct0-timeRange-content": {
        width: "100%",
        fontSize: (props: Props) => props.fontSize,
        borderCollapse: "collapse",
      },
      "& th": {
        lineHeight: "22px",
      },
      "& .ct0-timeRange-cell": {
        textAlign: "center",
        color: "#d9d9d9",
        padding: "3px 0",
      },
      "& .ct0-timeRange-cell-in-view": {
        color: "#666",
        cursor: "pointer",
      },
      "& .ct0-timeRange-cell-inner": {
        lineHeight: "24px",
        height: "24px",
      },
      "& .ct0-timeRange-cell-in-view .ct0-timeRange-cell-inner-between": {
        background: "rgba(3,122,255, 0.1)",
      },
      "& .ct0-timeRange-cell-in-view .ct0-timeRange-cell-inner-selected": {
        background: "#037AFF",
        borderRadius: "50%",
        color: "#fff",
        maxWidth: "24px",
        margin: "0 auto",
      },
    },
    "& .ct0-timeRange-footer": {
      height: "40px",
      borderTop: "1px solid rgba(0, 0, 0, 0.09)",
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-end",
      padding: "0 16px",
      position: "absolute",
      width: "100%",
      bottom: 0,
      boxSizing: "border-box",
      "& span": {
        cursor: "pointer",
        minWidth: "45px",
        height: "24px",
        fontSize: (props: Props) => props.fontSize,
        textAlign: "center",
        lineHeight: "24px",
      },
      "& .ct0-timeRange-confirm-btn": {
        background: "#037AFF",
        borderRadius: "2px",
        color: "#fff",
        marginLeft: "10px",
      },
      "& .ct0-timeRange-confirm-btn-disabled": {
        background: "#bfbfbf",
      },
    },
    "& .ct0-timeRange-header": {
      padding: "0 16px",
      display: "flex",
      justifyContent: "space-around",
      alignItems: "center",
      height: "37px",
      borderTop: "1px solid rgba(0, 0, 0, 0.09)",
      borderBottom: "1px solid rgba(0, 0, 0, 0.09)",
      position: "relative",
      color: "#000",
      "& .ct0-timeRange-header-operation": {
        position: "absolute",
        "& span": {
          cursor: "pointer",
        },
        "& span:first-child": {
          paddingRight: "10px",
        },
        "& img": {
          width: "12px",
        },
      },
      "& .ct0-timeRange-header-operation-left": {
        left: "16px",
      },
      "& .ct0-timeRange-header-operation-right": {
        right: "16px",
      },
    },
  },
});
